<template>
  <div>
    <el-form
      ref="form"
      :inline="true"
      :model="form"
      :rules="rules"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="选择TC" prop="tcName">
        <el-select v-model="form.tcName" placeholder="请选择TC">
          <el-option
            v-for="tc in tcOptions"
            :key="tc.userId"
            :label="tc.userName"
            :value="tc.userName"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="金额" prop="storedMoney">
        <el-input-number
          v-model="form.storedMoney"
          :min="0"
          :precision="2"
          :controls="false"
          type="number"
          placeholder="请输入"
        >
        </el-input-number>
      </el-form-item>
      <el-form-item label="支付方式" prop="consumeChannelsId">
        <el-select v-model="form.consumeChannelsId" placeholder="活动区域">
          <el-option label="现金" value="1"></el-option>
          <el-option label="支付宝" value="2"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div style="display: flex; justify-content: center; margin-top: 10px">
      <el-button @click="cancels">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </div>
</template>

<script>
import { addHistory } from '@/api/erp/vipConsumeHistory'
export default {
  props: {
    tcOptions: {
      type: Array,
      default: () => [],
    },
    userName: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      form: {
        operationStatus: 1,
      },
      rules: {
        tcName: [{ required: true, message: '请选择TC', trigger: 'change' }],
        storedMoney: [
          {
            required: true,
            message: '请填写正确的金额,保留两位小数',
            trigger: 'blur',
            pattern: /(^[\d]|^[1-9][\d]*)($|[\.][\d]{0,2}$)/,
          },
        ],
        consumeChannelsId: [
          { required: true, message: '请选择支付方式', trigger: 'change' },
        ],
      },
    }
  },
  methods: {
    // 表单重置
    reset() {
      this.form = {
        operationStatus: 1,
      }
      this.resetForm('form')
    },
    cancels() {
      this.reset()
    },
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const data = {
            ...this.form,
          }
          console.log(this.form)
          // addHistory(this.form)
        }
      })
    },
  },
}
</script>
